<template>
	<view class="container">
		<u-form ref="uForm" label-position="left" label-width="auto" :model="formData" :rules="rules" :errorType="['message']">
			<view class="wd-form-wrapper">
				<u-form-item label="会员卡名称" prop="name">
					<u-input type="text" placeholder="必填项" placeholder-style="{color: '#999999'}" :clearable="false" v-model="formData.name"></u-input>
				</u-form-item>
				<u-form-item label="会员卡类型" prop="course_category_text" right-icon="arrow-right" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}">
					<u-input type="select" placeholder="请选择" placeholder-style="{color: '#999999'}" :clearable="false" :disabled="true" v-model="formData.course_category_text" @click="chooseVipType()"></u-input>
				</u-form-item>
				
				<u-form-item label="适用范围" prop="range_type_text" right-icon="arrow-right" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}">
					<u-input type="select" placeholder="请选择" placeholder-style="{color: '#999999'}" :clearable="false" :disabled="true" v-model="formData.range_type_text" @click="rangeTypeShow=true"></u-input>
				</u-form-item>
				
				<u-form-item label="会员卡类型" prop="type_text" right-icon="arrow-right" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}">
					<u-input type="select" placeholder="请选择" placeholder-style="{color: '#999999'}" :clearable="false" :disabled="true" v-model="formData.type_text" @click="typeShow=true"></u-input>
				</u-form-item>
				
				<u-form-item label="次数(次)" prop="card_value" v-if="formData.type==2">
					<u-input type="number" placeholder="必填项" placeholder-style="{color: '#999999'}" :clearable="false" v-model="formData.card_value"></u-input>
				</u-form-item>
			
				<u-form-item label="会员卡期限" prop="unit_text" right-icon="arrow-right" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}">
					<view class="right-flex">
						<u-input type="number" placeholder="必填项" placeholder-style="{color: '#999999'}" :clearable="false" v-model="formData.expire_value"></u-input>
						<u-input type="select" placeholder="请选择" placeholder-style="{color: '#999999'}" :clearable="false" :disabled="true" v-model="formData.unit_text" @click="unitShow=true"></u-input>
					</view>
				</u-form-item>
				
				<u-form-item label="售价（元）" prop="salesprice">
					<u-input type="digit" placeholder="必填项" placeholder-style="{color: '#999999'}" :clearable="false" v-model="formData.salesprice"></u-input>
				</u-form-item>
			</view>
			<view class="wd-form-wrapper">
				<u-form-item label="适用课程" v-if="formData.range_type==1" prop="course" right-icon="arrow-right" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}">
					<u-input type="select" placeholder="请选择" placeholder-style="{color: '#999999'}" :clearable="false" :disabled="true" v-model="formData.course" @click="courseShow=true"></u-input>
				</u-form-item>
				
				<u-form-item label="适用老师" v-else prop="teacher" right-icon="arrow-right" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}">
					<u-input type="select" placeholder="请选择" placeholder-style="{color: '#999999'}" :clearable="false" :disabled="true" v-model="formData.teacher" @click="teacherShow=true"></u-input>
				</u-form-item>
			</view>
		</u-form>
		<view class="wd-form-footer">
			<view class="wd-form-footer__btn">
				<u-button :custom-style="wd_button_primary" shape="circle" :ripple="true" @click="submit">{{vip_id>0?'确认修改':'确认新增'}}</u-button>
			</view>
		</view>
		
		
		<!-- 选择会员卡类型 -->
		<u-select mode="single-column" title="请选择会员卡类型" v-model="courseCategoryShow" :list="cardTypeList" @confirm="courseCategoryConfirm"></u-select>
		<!-- 选择适用范围 -->
		<u-select v-if="rangeTypeShow" mode="single-column" title="请选择会员卡模式" v-model="rangeTypeShow" :list="rangeTypeList" @confirm="rangeTypeConfirm"></u-select>
		<!-- 选择会员卡模式 -->
		<u-select v-if="typeShow" mode="single-column" title="请选择会员卡模式" v-model="typeShow" :list="typeList" @confirm="typeConfirm"></u-select>
		<!-- 选择会员卡期限 -->
		<u-select mode="mutil-column-auto" title="请选择会员卡期限" v-model="unitShow" :list="unitList" @confirm="unitConfirm"></u-select>
		<!-- 选择授课老师 -->
		<u-popup v-model="teacherShow" mode="bottom">
			<view class="popup-wrapper">
				<view class="popup-wrapper__title">
					<view style="color: #606266;" @click="teacherShow=false">取消</view>
					<view>请选择适用老师</view>
					<view style="color: #2979ff;" @click="teacherConfirm">确定</view>
				</view>
				<view class="popup-wrapper__body">
					<u-checkbox-group :wrap="true" style="display:block;width:100%;">
						<u-checkbox
							v-for="(item, index) in teacherList" :key="index" 
							v-model="item.checked" :name="item.label"
						>{{item.label}}</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
		</u-popup>
		<!-- 选择适用课程 -->
		<u-popup v-model="courseShow" mode="bottom">
			<view class="popup-wrapper">
				<view class="popup-wrapper__title">
					<view style="color: #606266;" @click="courseShow=false">取消</view>
					<view>请选择适用课程</view>
					<view style="color: #2979ff;" @click="courseConfirm">确定</view>
				</view>
				<view class="popup-wrapper__body">
					<u-checkbox-group :wrap="true" style="display:block;width:100%;">
						<u-checkbox
							v-for="(item, index) in courseList" :key="index" 
							v-model="item.checked" :name="item.label"
						>{{item.label}}</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vip_id:0,
				formData: {
					name: '',
					course_category_text: '',
					course_category_id: 0,
					range_type_text: '',
					range_type: 1,
					type_text:'',
					type: 1,
					card_value: 0,
					expire_value:'',
					unit_text: '',
					unit:0,
					teacher: '',
					teacher_id:'',
					className: '',
					salesprice: 0,
					course: '',
					course_ids: '',
				},
				rules: {
					name: [{ required: true, trigger: ['change','blur'], message: '请输入会员卡名称' }],
				},
				courseCategoryShow: false,
				cardTypeList: [],
				
				rangeTypeShow: false,
				rangeTypeList: [{ value: 1, label: '普通课程卡' },{ value: 2, label: '老师卡' },],
				
				typeShow: false,
				typeList: [{ value: 1, label: '时间卡' },{ value: 2, label: '次卡' },],
				
				unitShow: false,
				unitList: [{ value: 1, label: '天' },{ value: 2, label: '月' },{ value: 3, label: '年' },],
				teacherShow: false,
				teacherList: [],
				courseShow: false,
				courseList: [],
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options){	
			this.fetchCategory();
			if(options.vip_id){
				this.vip_id =options.vip_id;
				this.detail();
				uni.setNavigationBarTitle({
				　　title:'修改会员卡'
				})
			}
		},
		methods: {
			//获取分类
			fetchCategory(){
				let shop = this.$core.getCurrentShop();
				let shop_id = shop.id;
				this.$core.get({url:'fitness.common/category',data:{shop_id:shop_id},success:(ret)=>{
					for(var i=0;i<ret.data.length;i++){
						ret.data[i].value = ret.data[i].id;
						ret.data[i].label = ret.data[i].name;
					}
					 this.cardTypeList = ret.data;
				}});
			},
			
			detail(){
				var that = this;
				var vip_id = that.vip_id;
				this.$core.get({url:'fitness.manage/vip_detail',data:{vip_id:vip_id},success:(ret)=>{
					 ret.data.course_category_text = ret.data.course_category.name;
					 this.formData = ret.data;
					 this.formData.range_type == 1 ? this.getCourse() : this.getTeacher();
				}});
			},
			
			//获取课程
			getCourse(){
				let that = this;
				let shop = this.$core.getCurrentShop();
				let shop_id = shop.id;
				let course_category_id = that.formData.course_category_id;
				if(!shop_id || !course_category_id) return false;
				this.$core.post({url:'fitness.common/range_course',data:{shop_id:shop_id,course_category_id:course_category_id},success:(ret)=>{
					let course_ids = that.formData.course_ids;
					let default_course = [{value:'-1',label:'全部',checked:course_ids && course_ids==-1?true:false}];
					 for(var i=0;i<ret.data.length;i++){
						let course = {
							value:ret.data[i].id,
							label:ret.data[i].name,
							checked:false
						};
					 	if(course_ids && course_ids != -1 && course_ids.split(',').indexOf(course.value.toString()) !== -1){
					 		course.checked = true;
					 	}
					 	default_course.push(course)
					 }
					 that.courseList = default_course
				}});
			},
			
			//获取课程
			getTeacher(){
				let that = this;
				let shop = this.$core.getCurrentShop();
				var shop_id = shop.id;
				if(!shop_id) return false;
				this.$core.post({url:'fitness.common/range_teacher',data:{shop_id:shop_id},success:(ret)=>{
					let teacher_id = that.formData.teacher_id;
					let default_teacher = [{value:'-1',label:'全部',checked: teacher_id && teacher_id==-1?true:false}];
					
					 for(var i=0;i<ret.data.length;i++){
						let teacher = {
							value:ret.data[i].id,
							label:ret.data[i].name,
							checked:false
						};
					 	if(teacher_id && teacher_id != -1 && teacher_id.split(',').indexOf(course.value.toString()) !== -1){
					 		teacher.checked = true;
					 	}
					 	default_teacher.push(teacher)
					 }
					 that.teacherList = default_teacher
				}});
			},

			// 请选择适用分类
			courseCategoryConfirm(e) {
				this.formData.course_category_text = e[0].label;
				this.formData.course_category_id = e[0].value;
				this.formData.range_type == 1 ? this.getCourse() : this.getTeacher();
			},
			// 请选择适用范围
			rangeTypeConfirm(e) {
				this.formData.range_type_text = e[0].label;
				this.formData.range_type = e[0].value;
				this.formData.range_type == 1 ? this.getCourse() : this.getTeacher();
			},
			//
			chooseVipType(){
				console.log(1)
				this.courseCategoryShow = true;
			},
			//会员卡类型
			typeConfirm(e){
				this.formData.type_text = e[0].label;
				this.formData.type = e[0].value;
			},
			// 请选择会员卡期限
			unitConfirm(e) {
				this.formData.unit_text = e[0].label
				this.formData.unit = e[0].value
			},
			// 请选择适用课程
			courseConfirm(e) {
				let course = '';
				let course_ids = ''
				this.courseList.map((val, index) => {
					if (val.checked) {
						course += course == '' ? val.label : ',' + val.label;
						course_ids += course_ids == '' ? val.value : ',' + val.value;
					}
				})
				if(course_ids.split(',').indexOf('-1') !== -1){
					course_ids = '-1';
					course = '全部';
				}
				this.formData.course = course;
				this.formData.course_ids = course_ids;
				this.courseShow = false;
			},
			// 请选择适用老师
			teacherConfirm(e) {
				let teacher = '';
				let teacher_id = ''
				this.teacherList.map((val, index) => {
					if (val.checked) {
						teacher += teacher == '' ? val.label : ',' + val.label;
						teacher_id += teacher_id == '' ? val.value : ',' + val.value;
					}
				});
				if(teacher_id.split(',').indexOf('-1') !== -1){
					teacher_id = '-1';
					teacher = '全部';
				}
				this.formData.teacher = teacher;
				this.formData.teacher_id = teacher_id;
				this.teacherShow = false;
				
			},
			submit() {
				var that = this;
				let shop = this.$core.getCurrentShop();
				var shop_id = shop.id;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						var formData = that.formData;
						formData['vip_id'] = that.vip_id;
						formData['shop_id'] = shop_id;
						that.$core.post({url:'fitness.manage/set_vip',data:formData,success:(ret)=>{
							that.getOpenerEventChannel().emit("setSuccess",{})
							uni.navigateBack({})
							uni.showToast({title: ret.msg,icon: 'none',})
						}});
					} else {
						console.log('验证失败');
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 1rpx 0;
		background: #F6F6F6;
	}
	.popup-wrapper {
		&__title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			padding: 0 20rpx;
		}
		&__body {
			display: flex;
			flex-wrap: wrap;
			max-height: 60vh;
			padding: 24rpx;
			overflow-x: hidden;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			/deep/ .u-checkbox {
				padding: 8rpx 0;
			}
			/deep/ .u-checkbox__label {
				flex: 1;
				margin-left: 24rpx;
			}
			.color {
				display: block;
				margin: 10rpx;
				width: 162rpx;
				height: 80rpx;
				border-radius: 24rpx;
				box-sizing: border-box;
				&.active {
					border: 4rpx #6D4BBE solid;
				}
			}
		}
	}
	.right-flex{
		display: flex;
	}
</style>